<template>
	<div class="outerFrame">
        <img src="../../assets/image/demo-1-bg.jpg" class="backgroundImg" :style="handleGlass()">
        <canvas style="height:100%;width:100%;z-index:1;position:fixed;top:0px;left:0px;"></canvas>
        <div class="loginFrame" :style="handleGlass()">
            <div class="inputPane">
                <span style="color:white;font-size:25px">欢迎登录</span>
                <el-input placeholder="请输入账号" clearable prefix-icon="el-icon-user" class="input" v-model="username" maxlength="10"></el-input>
                <el-input placeholder="请输入密码" clearable prefix-icon="el-icon-goods" class="input" v-model="password" type="password" maxlength="32"></el-input>
            </div>
            <div class="registerFrame">
                <el-button class="button" @click="loginUser">登录</el-button>
                <el-button class="button" @click="openDialogFrame">注册</el-button>
            </div>
        </div>
        <el-dialog :visible.sync="DialogFrame" :show-close="true" title="注册用户" ref="aaa" @close="handleClose">
            <el-form ref="registForm" :model="register" class="registerForm" :rules="rules">
                <el-form-item label="用户账号" prop="username">
                    <el-input v-model="register.username"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" prop="password">
                    <el-input v-model="register.password" type="password"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名" prop="realname">
                    <el-input v-model="register.realname"></el-input>
                </el-form-item>
                <el-form-item label="用户邮箱" prop="email">
                    <el-input v-model="register.email"></el-input>
                </el-form-item>
                <el-form-item label="用户电话" prop="phone">
                    <el-input v-model="register.phone"></el-input>
                </el-form-item>
                <el-form-item label="用户角色" prop="role">
                    <el-radio v-model="register.role" label="0">普通用户</el-radio>
                    <el-radio v-model="register.role" label="1">管理员</el-radio>
                </el-form-item>
                <el-form-item label="用户性别" prop="gender">
                    <el-radio v-model="register.gender" label="0">男</el-radio>
                    <el-radio v-model="register.gender" label="1">女</el-radio>
                </el-form-item>
                <el-form-item label="用户头像" prop="portrait">
                    <el-upload action="http://db.etoak.com:9527/sysFile/fileUpload" 
                        :show-file-list="true"
                        :limit="1"
                        :before-upload="beforeUpload"
                        :on-remove="onRemove"
                        :on-success="onSuccess"
                        class="avatar-uploader"
                        list-type="picture-card"
                        ref="upload"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <div style="display:flex;justify-content:space-between">
                    <el-button @click="registerUser" style="width:150px">注册</el-button>
                    <el-button @click="resetForm" style="width:150px">重置</el-button>
                </div>
            </el-form>
        </el-dialog>
	</div>
</template>


<script>
export default {
	data(){
        let rule = (rule,value,callback) =>{
            if(this.register.username == ''){
                return callback(new Error('用户不能为空'));
            }
            let rul =/^[A-Za-z0-9]+$/;
            if(!rul.test(this.register.username)){
                return callback(new Error('只能包含英文与数组与字母'))
            }
            return callback();
        }
        let rulepassword = (rule,value,callback) =>{
            if(this.register.password == ''){
                return callback(new Error('密码不能为空'));
            }
            let rul =/^[A-Za-z0-9]+$/;
            if(!rul.test(this.register.username)){
                return callback(new Error('只能包含英文与数组与字母'))
            }
            return callback();
        }
		return {
            username:'',
            password:'',
            register:{
                username:'',
                password:'',
                realname:'',
                email:'',
                phone:'',
                role:'0',
                gender:'0',
                path:''
            },
            DialogFrame:false,
            rules:{
                username:[
                    {validator:rule,trigger:'blur'},
                ],
                password:[
                    {validator:rulepassword,trigger:'blur'},
                ],
            },
            uploadImgList:[]
		}
	},
	methods:{
        resetForm(){
            this.$refs['registForm'].resetFields();
            this.$refs['upload'].clearFiles();
        },
        registerUser(){
            this.$refs['registForm'].validate(valid=>{
                if(valid){
                    this.sdk.post('http://db.etoak.com:9527/testUser/add',this.register).then(response=>{
                        response.data.code==200?this.$message.success(response.data.msg):this.$message.error(response.data.msg);
                        if(response.data.code==200){
                            this.DialogFrame = false;
                            this.$refs['registForm'].resetFields();
                            this.$refs['upload'].clearFiles()
                        }
                    });
                }
            });
        },
        onRemove(file,fileList){
            this.uploadImgList = this.uploadImgList.filter(item=>{
                return item!=file.response.data.path;
            });
            this.register.path = '';
        },
        onSuccess(response,file,fileList){
            this.uploadImgList.push(response.data.path);
            this.register.path = response.data.path;
        },
        beforeUpload(file){
            if(!(file.type=='image/png'||file.type=='image/jpeg')){
                this.$message.error('只能是jpg或者png格式');
                return false;
            }
            return true;
        },
        handleGlass(){
            if(this.DialogFrame==true){
                return 'filter:blur(15px)'
            }
            return ''
        },
        handleClose(){
            this.DialogFrame = false;
        },
        handleCanvas(){
            //获取canvas元素,并给canvas设置大小
            let can = document.querySelector("canvas");
            can.width = window.innerWidth;
            can.height = window.innerHeight;
            //canvas大小随浏览器一起变化
            window.onresize = () =>{
                can.width = window.innerWidth;
                can.height = window.innerHeight;
            };
            //获取2D绘图环境
            let ctx = can.getContext("2d");
            //返回一个min和max之间的一个随机整数
            let randow = (min, max) =>{
                return Math.round(Math.random() * (max - min) + min);
            }
            //返回一个min和max之间的一个随机小数
            let random = (min, max) =>{
                return Math.random() * (max - min) + min;
            }

            //用来存放每个圆的属性
            let dots = [];
            //生成圆的个数
            let arcNum = 100;
            // 存储n个不同属性的圆
            let createArc = () =>{
                for (let i = 0; i < arcNum; i++) {
                    //定义一个对象，将圆的属性存储起来
                    let arcObj = {
                        arcX: randow(0, window.innerWidth), //圆的X坐标
                        arcY: randow(0, window.innerHeight), //圆的Y坐标
                        arcR: 2, //圆的半径
                        color: `rgba(${randow(0, 255)},${randow(0, 255)},${randow(
                        0,
                        255
                        )},${random(0, 1)})`,
                        suduX: random(-0.5, 0.5), //圆X轴速度
                        suduY: random(-0.5, 0.5) //圆Y轴速度
                    };
                    dots.push(arcObj);
                }
            }
            createArc();
            // 画圆
            let draw = () =>{
                ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
                for (let i = 0; i < arcNum; i++) {
                    //让圆动起来
                    dots[i].arcX += dots[i].suduX;
                    dots[i].arcY += dots[i].suduY;
                    ctx.beginPath();
                    ctx.fillStyle = dots[i].color;
                    ctx.arc(dots[i].arcX, dots[i].arcY, dots[i].arcR, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.closePath();
                    //边界检测,将速度取反,实现碰撞
                    if (dots[i].arcX <= 0 || dots[i].arcX > window.innerWidth){
                        dots[i].suduX *= -1;
                    }
                    if (dots[i].arcY <= 0 || dots[i].arcY > window.innerHeight){
                        dots[i].suduY *= -1;
                    }
                    //利用勾股定理判断是否连线 a*a+b*b=c*c
                    //  Math.sqrt() 平方根
                    //  Math.pow(a,b)  a的b次方
                    for (let j = i + 1; j < arcNum; j++) {
                        if (Math.sqrt(Math.pow(dots[i].arcX - dots[j].arcX, 2) + Math.pow(dots[i].arcY - dots[j].arcY, 2)) < 100) {
                            ctx.beginPath();
                            ctx.strokeStyle = dots[i].color;
                            ctx.moveTo(dots[i].arcX, dots[i].arcY);
                            ctx.lineTo(dots[j].arcX, dots[j].arcY);
                            ctx.closePath();
                            ctx.stroke();
                        }
                    }
                }
            }
            setInterval(draw, 60 / 1000);
            //添加鼠标移动事件
            can.onmousemove = function(e) {
                let ev = e;
                let mouseX = ev.offsetX;
                let mouseY = ev.offsetY;
                for (let i = 0; i < arcNum; i++) {
                    if (Math.sqrt(Math.pow(dots[i].arcX - mouseX, 2) + Math.pow(dots[i].arcY - mouseY, 2))<100) {
                        ctx.beginPath();
                        ctx.strokeStyle = dots[i].color;
                        ctx.moveTo(mouseX, mouseY);
                        ctx.lineTo(dots[i].arcX, dots[i].arcY);
                        ctx.closePath();
                        ctx.stroke();
                    }
                }
            };
        },
        loginUser(){
            if(this.userName==''||this.password==''){
                this.$message.error('账号或密码不能为空');
                return;
            }
            this.sdk.get('http://db.etoak.com:9527/testUser/login?username='+this.username+'&password='+this.password).then(response=>{
                if(response.data.code==2333){
                    this.$message.error(response.data.msg);
                }else{
                    localStorage.setItem('token','true');
                    this.$router.push('/home');
                }
            });
        },
        openDialogFrame(event){
            this.DialogFrame = true;
        }
	},
	created(){

	},
    mounted(){
        this.handleCanvas();
    }
}
</script>
<style scoped>
::v-deep .el-button{
    background: transparent;
    border: 1px solid grey;
    color: white;
}
::v-deep .el-upload--picture-card{
    background-color: transparent;
}
.el-dialog__wrapper::-webkit-scrollbar {
    width:6px;
    max-height:50px;
}
.el-dialog__wrapper::-webkit-scrollbar-thumb {
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
.el-dialog__wrapper::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    border: 1px dashed grey;
    text-align: center;
    border-radius: 13px;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
::v-deep .el-dialog__title{
    color: white;
}
::v-deep .el-radio__input.is-checked+.el-radio__label,.el-radio__input.is-checked+.el-radio__label{
    color: white;
}
::v-deep .el-radio__input.is-checked .el-radio__inner{
    border-color: white;
    background: transparent;
}
::v-deep .el-radio__inner{
    background: transparent;
    border: 1px solid grey;
}
::v-deep .el-input__inner{
    color: white;
    background: transparent;
    border: 1px solid grey;
}
::v-deep .el-form-item__label{
    color: white;
}
::v-deep .el-dialog{
    background-color: aliceblue;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: 1px solid grey;
    border-radius: 30px;
}
.el-form-item{
    display: flex;
    flex-flow: row nowrap;
}
.backgroundImg{
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -1;
}
.loginFrame{
    height: 400px;
    width: 40%;
    z-index: 100;
}
.outerFrame{
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    bottom: 15px;
}
.inputPane{
    height: calc(100% - 30px);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;  
    flex-flow: column nowrap;  
}
.input{
    width: 50%;
    margin-top: 30px;
    outline: none;
}
::v-deep .el-input--prefix .el-input__inner{
    outline: none;
    background: transparent;
    border-radius: 20px;
    border: 1px solid grey;
    color: white;
}
.registerFrame{
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;  
    flex-flow: row nowrap;
    position: relative;
    bottom: 25px;
}
.button{
    height: 100%;
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border-radius: 20px;
    border: 1px solid grey;
    color: white;
}
</style>